<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <link th:href="@{/js/el/element.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
<<<<<<< HEAD
=======

>>>>>>> a254f66694e58548627c0548f6e222a03570bbfd
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <style>
        /*登录div的设置*/
        body{
            height: 100%;
            width: 100%;
<<<<<<< HEAD
=======
            background: url('/css/img/1.png')no-repeat;
>>>>>>> a254f66694e58548627c0548f6e222a03570bbfd
            background-size: cover;
            position: absolute;
            overflow: hidden;
        }
        .myTitle {
            width: 200px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 58%;
            top: 23%;
            transform: translate(-23%, -58%);
            /*内边距*/
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .myFooter {
            width: 360px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 92%;
            top: 95%;
            transform: translate(-95%, -95%);
        }
        .myLogin {
            width: 300px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 60%;
            top: 40%;
            transform: translate(-40%, -60%);
            /*内边距*/
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="myLogin">
            <h2 style="text-align: center">&nbsp;登录&nbsp;</h2>
            <el-divider></el-divider>
            <div >
                <el-input id="name" v-model="user.username" placeholder="请输入帐号">
                    <template slot="prepend"><i class="el-icon-s-custom"></i></template>
                </el-input>
            </div>

            <div style="margin-top: 20px;">
                <el-input id="password" v-model="user.password" type="password" placeholder="请输入密码">
                    <template slot="prepend"><i class="el-icon-unlock"></i></template>
                </el-input>
            </div>

            <div  style="margin-top: 30px;">
                <el-button id="login" v-on:click="doLogin()" style="width:100%" type="primary" plain>登录</el-button>
            </div>
            <hr>

        </div> <!-- mylogin -->
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
           user:{}
        },
        methods:{
            //登录
           doLogin(){
               var that = this
               console.log("user==")
               console.log(this.user)
               var vdata={username:this.user.username,password:this.user.password};
               axios({
                   url:"/doLogin",
                   method: "post",
                   headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                   params: vdata
               }).then(function (resp) {
                   if (resp.data.code ==0 ) {
                       that.$message({
                           showClose: true,
                           offset: 100,
                           message: resp.data.msg,
                           type: 'warning'
                       });
                       //跳转到首页
                       window.location.href = resp.data.action;
                   } else {
                       that.$message({
                           showClose: true,
                           offset: 100,
                           message: resp.data.msg,
                           type: 'error'
                       });
                   }
               })
           }
        },
        mounted:function () {


        }
    })
</script>
</html>